<template>
  <div class="withdraw">
    <div class="price">
      <p>{{integral}}</p>
      <p>可提现金额</p>
    </div>
    <div class="flex-column align-items-center">
      <div class="title">请选择提现金额</div>
      <div class="maturity-time">
        <i class="el-icon-info"></i>
        100欢乐豆=100元
      </div>
    </div>
    <div class="Grade-box flex-row align-items-center justify-content-center">
      <div class="Grade" v-for="(item,index) in withdrawalInterval" :key="index">
        <el-radio v-model="radio1" :label="item.lable" :disabled="item.lable>integral" border>{{item.lable}}元</el-radio>
      </div>
      <!-- <div class="Grade">
        <el-radio v-model="radio1" label="200" border>200元</el-radio>
      </div>
      <div class="Grade">
        <el-radio v-model="radio1" label="300" border>300元</el-radio>
      </div>
      <div class="Grade">
        <el-radio v-model="radio1" label="400" border>400元</el-radio>
      </div>
      <div class="Grade">
        <el-radio v-model="radio1" label="500" border>500元</el-radio>
      </div>
      <div class="Grade">
        <el-radio v-model="radio1" label="600" border>600元</el-radio>
      </div>-->
    </div>
    <div style="margin-top:70px;">
      <div class="flex-row align-items-center justify-content-between material-input">
        <el-form :inline="true" :model="form" :rules="rules" ref="form" class="demo-form-inline">
          <el-form-item prop="truename">
            <el-input v-model="form.truename" placeholder="请填写支付宝账号真实姓名" style="width:230px;"></el-input>
          </el-form-item>
          <el-form-item prop="username">
            <el-input v-model="form.username" placeholder="请填写支付宝账号" style="width:230px;"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              shadow="always"
              style="width:240px;"
              @click="onSubmit('form')"
            >提现</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="note">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>注意事项</span>
        </div>
        <div class="text item">1.提现服务费每笔5%</div>
        <div class="text item">2.到账时间预计两个工作日内</div>
        <div class="text item">3.提供的支付宝账号/姓名不匹配将无法到账</div>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  props: {},
  data () {
    return {
      radio1: '-1',
      form: {
        username: '',
        truename: ''
      },
      rules: {
        username: [
          {
            required: true,
            message: '请填写支付宝账号真实姓名',
            trigger: 'blur'
          }
        ],
        truename: [
          { required: true, message: '请填写支付宝账号', trigger: 'blur' }
        ]
      },
      integral: 0,
      withdrawalInterval: [
        {
          lable: '100'
        },
        {
          lable: '200'
        },
        {
          lable: '300'
        },
        {
          lable: '400'
        },
        {
          lable: '500'
        },
        {
          lable: '600'
        }
      ]
    }
  },
  computed: {
    uuid () {
      return sessionStorage.getItem('u')
    }
  },
  created () {
    this.getUserInfo()
  },
  mounted () {},
  watch: {},
  methods: {
    onSubmit (formName) {
      this.$refs[formName].validate(valid => {
        if (valid && this.radio1 != -1) {
          this.withdraw()
        } else {
          // console.log("error submit!!");
          return false
        }
      })
    },
    withdraw () {
      let rsaStr = `username=${this.form.username}&truename=${this.form.truename}&amount=${this.radio1}`
      this.$getCode(rsaStr).then(rsaCode => {
        this.http
          .withdraw(rsaCode)
          .then(res => {
            this.getUserInfo()
            if (res.data.errno === '000') {
              this.$message.success(res.data.errmsg)
            } else {
              this.$message.error(res.data.errmsg)
            }
          })
          .catch(err => {
            // console.log(err);
          })
      })
    },
    getUserInfo () {
      let rsaStr = `uuid=${this.uuid}`
      this.$getCode(rsaStr).then(rsaCode => {
        this.http
          .getUserInfo(rsaCode)
          .then(res => {
            if (res.data.errno === '000') {
              this.integral = parseInt(res.data.result.data.integral)
              this.radio1 =
                this.withdrawalInterval[0].lable > res.data.result.data.integral
                  ? '-1'
                  : '100'
            }
          })
          .catch(err => {
            // console.log(err);
          })
      })
    }
  },
  components: {}
}
</script>

<style scoped lang="less">
@import url("./index.less");
</style>
